<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <div class="content-box">
      <N2CostLine :searchInfo="searchInfo" :dictCode="dictCode"></N2CostLine>
      <UsageCost :searchInfo="searchInfo" :dictCode="dictCode"></UsageCost>
    </div>
  </PageWrapper>
</template>
<script setup
  lang="ts">
  import { ref, onMounted } from 'vue'
  import { PageWrapper } from '@/components/Page'
  import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
  import N2CostLine from './N2CostLine.vue'
  import UsageCost from './UsageCost.vue'

  defineOptions({ name: 'GasUsageCost' })

  const searchRef = ref()
  const searchInfo = ref()
  const dictCode = 'large_gas'

  onMounted(async () => {
    // searchRef.value.handleSearch()
  })
  const handleSearch = (params) => {
    searchInfo.value = params
  }
</script>
<style scoped lang="scss">
  .content-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: #fff;

    .chart-box {
      flex-shrink: 0;
      height: 50%;
    }
  }
</style>